<%@ page import="com.realjinge.config.WeChatConfig"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>realQuestion</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="<%=basePath%>css/weui.css">
<link rel="stylesheet" href="<%=basePath%>css/example.css">
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
	wx.config({
	    debug : false,
	    appId : '${ret.appId }',
	    timestamp : '${ret.timestamp }',
	    nonceStr : '${ret.nonceStr }',
	    signature : '${ret.signature }',
		jsApiList : [ 'checkJsApi', 'hideAllNonBaseMenuItem', 'showMenuItems', 'onMenuShareAppMessage', 'onMenuShareTimeline' ]
	}); // end_config

	wx.ready(function() {

		wx.checkJsApi({
			jsApiList : [ 'hideAllNonBaseMenuItem', 'showMenuItems', 'onMenuShareAppMessage', 'onMenuShareTimeline' ],
			success : function(res) {
				// alert("成功了：" + res.errMsg);
			}
		});

		// 分享给朋友
		wx.onMenuShareAppMessage({
			title: 'realQuestion', // 分享标题
			desc: '快来进入 realQuestion 来答题吧！', // 分享描述
			// link: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx622b36f963439599&redirect_uri=http%3a%2f%2fhk.realjinge.com%2fweChat%2fview.do&response_type=code&scope=snsapi_base&state=1#wechat_redirect', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			link: '<%=basePath%>view.do?code=share&state=1', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			imgUrl: '<%=basePath%>images/share.png', // 分享图标
			type: 'link', // 分享类型,music、video或link，不填默认为link
			dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
			success: function () {
				// 用户确认分享后执行的回调函数
				alert("确认分享");
			},
			cancel: function () {
				// 用户取消分享后执行的回调函数
				alert("取消分享");
			}
		});
		
		// 分享到朋友圈
		wx.onMenuShareTimeline({
		    title: 'realQuestion', // 分享标题
		    // link: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx622b36f963439599&redirect_uri=http%3a%2f%2fhk.realjinge.com%2fweChat%2fview.do&response_type=code&scope=snsapi_base&state=1#wechat_redirect', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		    link: '<%=basePath%>view.do?code=share&state=1', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		    imgUrl: '<%=basePath%>images/share.png', // 分享图标
		    success: function () {
		    	// 用户确认分享后执行的回调函数
		    	alert("确认分享");
			},
			cancel: function () {
		    	// 用户取消分享后执行的回调函数
				alert("取消分享");
		    }
		});
		
		wx.hideAllNonBaseMenuItem();
        wx.showMenuItems({
            menuList: ['menuItem:share:appMessage', 'menuItem:share:timeline'] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
        });
		
	}); // end_ready

	wx.error(function(res) {
		alert("出错了：" + res.errMsg);
	}); // end_error
</script>
</head>

<body <c:if test="${token eq null }">onload="showErrorTips();"</c:if>
	<c:if test="${token ne null && msg ne null}">onload="showErrorMsg();"</c:if>>
	<div class="weui-dialog" id="errorMsg" style="display: none;">
		<div class="weui-dialog__bd">${msg }</div>
		<div class="weui-dialog__ft">
			<a href="javascript:;" onclick="cancelMsgDialog();" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
		</div>
	</div>

	<div class="weui-toptips weui-toptips_warn js_tooltips" style="display: none;" id="errorTips">未登录</div>
	<br>

	<div class="page flex js_show" style="background-color: #9ED99D;">
		<div class="page__hd">
			<h1 class="page__title">realQuestion</h1>
			<p class="page__desc">
				<a href="<%=basePath%>index.do">question.realjinge.com</a>
			</p>
		</div>
		<div class="page__bd page__bd_spacing">
			<div class="weui-flex">
				<div class="weui-flex__item">
					<div class="placeholder weui-btn weui-btn_primary" style="height: 5.5em; line-height: 5.5em; background-color: #1AAD19; color: #FFFFFF;" onclick="toStart();">开始答题</div>
				</div>
			</div>
			<div class="weui-flex">
				<div class="weui-flex__item">
					<div class="placeholder" style="height: 3.0em; line-height: 3.0em; background-color: #1AAD19; color: #FFFFFF;" onclick="toLogin();">登录</div>
				</div>
				<div class="weui-flex__item">
					<div class="placeholder" style="height: 3.0em; line-height: 3.0em; background-color: #EC8B89; color: #FFFFFF;" onclick="showLoginOutDialog();">登出</div>
				</div>
			</div>
			<div class="weui-flex">
				<div class="weui-flex__item">
					<div class="placeholder weui-btn weui-btn_primary" style="height: 3.5em; line-height: 3.5em; background-color: #1AAD19; color: #FFFFFF;" onclick="toStart('01')">单人答题</div>
				</div>
				<div class="weui-flex__item">
					<div class="placeholder weui-btn weui-btn_primary" style="height: 3.5em; line-height: 3.5em;">多人答题</div>
				</div>
				<div class="weui-flex__item">
					<div class="placeholder weui-btn weui-btn_primary" style="height: 3.5em; line-height: 3.5em;">好友对战</div>
				</div>
			</div>
			<div class="weui-flex">
				<div>
					<div class="placeholder" style="height: 3.0em; line-height: 3.0em; background-color: #1AAD19; color: #FFFFFF;" onclick="toQuestionList();">出题记录</div>
				</div>
				<div class="weui-flex__item">
					<div class="placeholder" style="height: 3.0em; line-height: 3.0em; background-color: #1AAD19; color: #FFFFFF;" onclick="toAddQuestion();">我要出题</div>
				</div>
				<div>
					<div class="placeholder" style="height: 3.0em; line-height: 3.0em; background-color: #1AAD19; color: #FFFFFF;" id="shareId">一键分享</div>
				</div>
			</div>
		</div>
		<div class="page__ft j_bottom">
			<div class="weui-footer">
				<p class="weui-footer__links">
					<a href="<%=basePath%>index.do" class="weui-footer__link">realQuestion</a>
				</p>
				<p class="weui-footer__text">Copyright © 2018 question.realjinge.com</p>
			</div>
		</div>
	</div>

	<div class="weui-dialog" id="startDialog" style="display: none;">
		<div class="weui-dialog__hd">
			<strong class="weui-dialog__title">realQuestion</strong>
		</div>
		<div class="weui-dialog__bd">question.realjinge.com</div>
		<div class="weui-dialog__ft">
			<a href="<%=basePath%>question/singleAnswer.do?token=${token }" class="weui-dialog__btn weui-dialog__btn_primary">单人答题</a>
			<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">多人答题</a>
		</div>
	</div>

	<div class="weui-dialog" id="loginOutDialog" style="display: none;">
		<div class="weui-dialog__hd">
			<strong class="weui-dialog__title">realQuestion</strong>
		</div>
		<div class="weui-dialog__bd">是否确认退出登录？</div>
		<div class="weui-dialog__ft">
			<a href="javascript:;" onclick="cancelLoginOutDialog();" class="weui-dialog__btn weui-dialog__btn_default">返回</a>
			<a href="javascript:;" onclick="toLoginOut();" class="weui-dialog__btn weui-dialog__btn_primary">确认</a>
		</div>
	</div>

	<div id="loadingToastId" style="display: none;">
		<div class="weui-mask_transparent"></div>
		<div class="weui-toast">
			<i class="weui-loading weui-icon_toast"></i>
			<p class="weui-toast__content">登录中</p>
		</div>
	</div>

</body>

<script type="text/javascript">
	document.querySelector('#shareId').onclick = function() {
		alert("点击微信右上角自带分享箭头分享给朋友！");
	};
	
	function toLogin(type) {
		document.getElementById("loadingToastId").style.display = "inline";
		setTimeout(function() {
			document.getElementById("loadingToastId").style.display = "none";
			window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=<%=WeChatConfig.APPID%>&redirect_uri=http%3a%2f%2f<%=WeChatConfig.DOMAIN_NAME%>%2fweChat%2fview.do&response_type=code&scope=snsapi_base&state=1#wechat_redirect";
		}, 2500);
	}
	
	function toStart(type) {
		if ('01' == type) {
			window.location.href="<%=basePath%>question/singleAnswer.do?token=${token }";
		} else if ('02' == type) {
			window.location.href="<%=basePath%>question/doubleAnswer.do?token=${token }";
		} else {
			showStartDialog();
		}
	}
	
	function toQuestionList() {
		window.location.href="<%=basePath%>question/questionList.do?token=${token }";
	}
	
	function toAddQuestion() {
		window.location.href="<%=basePath%>question/addQuestion.do?token=${token }";
	}
	
	function showStartDialog() {
		document.getElementById("startDialog").style.display = "inline";
	}
	
	function showLoginOutDialog() {
		document.getElementById("loginOutDialog").style.display = "inline";
	}
	
	function toLoginOut() {
		document.getElementById("loginOutDialog").style.display = "none";
		window.location.href="<%=basePath%>index.do?loginOut=01";
	}

	function cancelLoginOutDialog() {
		document.getElementById("loginOutDialog").style.display = "none";
	}

	function showErrorTips() {
		document.getElementById("errorTips").style.display = "inline";
		setTimeout(function() {
			document.getElementById("errorTips").style.display = "none";
		}, 2500);
	}

	function showErrorMsg() {
		document.getElementById("errorMsg").style.display = "inline";
		setTimeout(function() {
			document.getElementById("errorMsg").style.display = "none";
		}, 2500);
	}

	function cancelMsgDialog() {
		document.getElementById("errorMsg").style.display = "none";
	}
</script>

</html>